สถาปัตยกรรม React Fiber: การกระทบยอดและการจัดตารางเวลาเพื่อประสิทธิภาพระดับโลกที่เหนือชั้น

ในภูมิทัศน์ที่กว้างใหญ่และเชื่อมต่อถึงกันของการพัฒนาเว็บสมัยใหม่ React ได้สร้างชื่อเสียงให้ตัวเองเป็นเฟรมเวิร์กชั้นนำอย่างมั่นคง แนวทางการสร้างส่วนต่อประสานผู้ใช้ (UI) แบบประกาศ (declarative) ที่ใช้งานง่ายได้ช่วยให้นักพัฒนาทั่วทุกทวีปสามารถสร้างแอปพลิเคชันที่ซับซ้อนและมีการโต้ตอบสูงได้อย่างมีประสิทธิภาพอย่างน่าทึ่ง อย่างไรก็ตาม เวทมนตร์ที่แท้จริงเบื้องหลังการอัปเดตที่ราบรื่นและการตอบสนองที่รวดเร็วปานสายฟ้าของ React นั้นอยู่ลึกลงไปภายใต้พื้นผิว ภายในกลไกภายในที่ซับซ้อนของมัน นั่นคือ สถาปัตยกรรม React Fiber

สำหรับผู้ชมทั่วโลก การทำความเข้าใจกลไกที่ซับซ้อนของเฟรมเวิร์กอย่าง React ไม่ใช่แค่การศึกษาเชิงวิชาการเท่านั้น แต่เป็นขั้นตอนสำคัญในการสร้างแอปพลิเคชันที่มีประสิทธิภาพและยืดหยุ่นอย่างแท้จริง แอปพลิเคชันเหล่านี้ต้องมอบประสบการณ์ผู้ใช้ที่ยอดเยี่ยมบนอุปกรณ์ที่หลากหลาย สภาพเครือข่ายที่แตกต่างกัน และความคาดหวังทางวัฒนธรรมที่หลากหลายทั่วโลก คู่มือฉบับสมบูรณ์นี้จะทำการวิเคราะห์ความซับซ้อนของ React Fiber เจาะลึกถึงแนวทางปฏิวัติในการกระทบยอด (reconciliation) และการจัดตารางเวลา (scheduling) และให้ความกระจ่างว่าเหตุใดมันจึงทำหน้าที่เป็นรากฐานที่สำคัญสำหรับความสามารถที่ทันสมัยที่สุดของ React ในยุคปัจจุบัน

ยุคก่อน Fiber: ข้อจำกัดของ Stack Reconciler แบบ Synchronous

ก่อนการเปิดตัว Fiber ที่เป็นจุดเปลี่ยนสำคัญใน React 16 เฟรมเวิร์กได้อาศัยอัลกอริทึมการกระทบยอดที่เรียกกันทั่วไปว่า "Stack Reconciler" แม้ว่าจะเป็นนวัตกรรมในยุคนั้น แต่การออกแบบนี้ก็มีข้อจำกัดในตัวเองซึ่งกลายเป็นปัญหามากขึ้นเรื่อยๆ เมื่อเว็บแอปพลิเคชันมีความซับซ้อนเพิ่มขึ้นและความต้องการของผู้ใช้สำหรับปฏิสัมพันธ์ที่ลื่นไหลและไม่สะดุดก็พุ่งสูงขึ้น

การกระทบยอดแบบ Synchronous และไม่สามารถขัดจังหวะได้: ต้นเหตุของความกระตุก (Jank)

ข้อเสียเปรียบหลักของ Stack Reconciler คือลักษณะการทำงานที่เป็นแบบ synchronous ทั้งหมด เมื่อใดก็ตามที่มีการอัปเดต state หรือ prop เกิดขึ้น React จะเริ่มต้นการท่องไปใน component tree แบบลึกและเรียกซ้ำ (recursive traversal) ในระหว่างกระบวนการนี้ มันจะเปรียบเทียบการแสดงผลของ Virtual DOM ที่มีอยู่กับอันที่สร้างขึ้นใหม่อย่างพิถีพิถัน โดยคำนวณชุดการเปลี่ยนแปลง DOM ที่แม่นยำซึ่งจำเป็นต่อการอัปเดตส่วนต่อประสานผู้ใช้ ที่สำคัญคือ การคำนวณทั้งหมดนี้จะถูกดำเนินการเป็นงานชิ้นเดียวที่แบ่งแยกไม่ได้บนเธรดหลักของเบราว์เซอร์

ลองพิจารณาแอปพลิเคชันที่เผยแพร่ทั่วโลกซึ่งให้บริการผู้ใช้จากสถานที่ทางภูมิศาสตร์ที่หลากหลาย ซึ่งแต่ละคนอาจเข้าถึงอินเทอร์เน็ตผ่านอุปกรณ์ที่มีกำลังการประมวลผลและความเร็วเครือข่ายที่แตกต่างกัน ตั้งแต่การเชื่อมต่อใยแก้วนำแสงความเร็วสูงในใจกลางเมืองไปจนถึงเครือข่ายข้อมูลมือถือที่จำกัดกว่าในพื้นที่ชนบท หากการอัปเดตที่ซับซ้อนเป็นพิเศษ เช่น การเรนเดอร์ตารางข้อมูลขนาดใหญ่ แผนภูมิไดนามิกที่มีจุดข้อมูลหลายพันจุด หรือลำดับของแอนิเมชันที่ซับซ้อน ใช้เวลาหลายสิบหรือหลายร้อยมิลลิวินาที เธรดหลักของเบราว์เซอร์จะถูกบล็อกโดยสมบูรณ์ตลอดระยะเวลาของการดำเนินการนี้

พฤติกรรมการบล็อกนี้แสดงออกมาอย่างชัดเจนในรูปแบบของ "jank" หรือ "lag" (ความกระตุกหรือความหน่วง) ผู้ใช้จะประสบกับ UI ที่ค้าง การคลิกปุ่มที่ไม่ตอบสนอง หรือแอนิเมชันที่กระตุกอย่างเห็นได้ชัด เหตุผลง่ายๆ คือ เบราว์เซอร์ซึ่งเป็นสภาพแวดล้อมแบบเธรดเดียวสำหรับการเรนเดอร์ UI ไม่สามารถประมวลผลอินพุตของผู้ใช้ วาดเฟรมภาพใหม่ หรือดำเนินงานที่มีลำดับความสำคัญสูงอื่นๆ ได้จนกว่ากระบวนการกระทบยอดของ React จะเสร็จสมบูรณ์ สำหรับแอปพลิเคชันที่สำคัญ เช่น แพลตฟอร์มการซื้อขายหุ้นแบบเรียลไทม์ แม้แต่ความล่าช้าเพียงเศษเสี้ยววินาทีก็อาจส่งผลกระทบทางการเงินอย่างมีนัยสำคัญ ในโปรแกรมแก้ไขเอกสารร่วมกันที่ใช้โดยทีมที่กระจายตัวกัน การค้างชั่วขณะอาจรบกวนกระแสความคิดสร้างสรรค์และประสิทธิภาพการทำงานของบุคคลจำนวนมากอย่างรุนแรง

เกณฑ์มาตรฐานระดับโลกสำหรับส่วนต่อประสานผู้ใช้ที่ราบรื่นและตอบสนองอย่างแท้จริงคืออัตราเฟรมที่สม่ำเสมอที่ 60 เฟรมต่อวินาที (fps) การบรรลุเป้าหมายนี้จำเป็นต้องให้แต่ละเฟรมถูกเรนเดอร์ภายในเวลาประมาณ 16.67 มิลลิวินาที ลักษณะที่เป็น synchronous ของ Stack Reconciler ทำให้การบรรลุเป้าหมายประสิทธิภาพที่สำคัญนี้เป็นไปได้ยากมากหากไม่เป็นไปไม่ได้เลยสำหรับแอปพลิเคชันที่ไม่ใช่เรื่องเล็กน้อย ซึ่งนำไปสู่ประสบการณ์ที่ด้อยกว่ามาตรฐานสำหรับผู้ใช้ทั่วโลก

ปัญหา Recursion และ Call Stack ที่ไม่ยอมแพ้

การที่ Stack Reconciler อาศัยการเรียกซ้ำ (recursion) แบบลึกสำหรับการท่องไปใน tree ยิ่งซ้ำเติมปัญหาคอขวดแบบ synchronous ของมัน การกระทบยอดของแต่ละคอมโพเนนต์จะถูกจัดการโดยการเรียกฟังก์ชันแบบเรียกซ้ำ เมื่อการเรียกฟังก์ชันดังกล่าวเริ่มต้นขึ้น มันมีหน้าที่ต้องดำเนินการจนเสร็จสิ้นก่อนที่จะคืนการควบคุมกลับไป หากฟังก์ชันนั้นเรียกฟังก์ชันอื่นเพื่อประมวลผลคอมโพเนนต์ลูก ฟังก์ชันเหล่านั้นก็จะทำงานจนเสร็จสิ้นเช่นกัน สิ่งนี้สร้าง call stack ที่ลึกและไม่ยอมแพ้ ซึ่งเมื่อเริ่มต้นแล้วจะไม่สามารถหยุดชั่วคราว ขัดจังหวะ หรือปล่อยวางได้จนกว่างานทั้งหมดในสายการเรียกซ้ำนั้นจะเสร็จสิ้นโดยสมบูรณ์

สิ่งนี้ท้าทายอย่างมากต่อประสบการณ์ของผู้ใช้ ลองจินตนาการถึงสถานการณ์ที่ผู้ใช้ เช่น นักเรียนที่ทำงานร่วมกันในโครงการจากหมู่บ้านห่างไกล หรือนักธุรกิจที่เข้าร่วมการประชุมเสมือนจริง เริ่มต้นการโต้ตอบที่มีลำดับความสำคัญสูง เช่น การคลิกปุ่มสำคัญเพื่อเปิดกล่องโต้ตอบที่สำคัญ หรือการพิมพ์อย่างรวดเร็วในช่องป้อนข้อมูลที่จำเป็น หากในขณะนั้น การอัปเดต UI ที่มีความสำคัญต่ำกว่าและใช้เวลานานกำลังดำเนินการอยู่ (เช่น การเรนเดอร์เมนูขนาดใหญ่ที่ขยายออก) การโต้ตอบที่เร่งด่วนของพวกเขาจะล่าช้า UI จะรู้สึกอืดและไม่ตอบสนอง ส่งผลโดยตรงต่อความพึงพอใจของผู้ใช้และอาจนำไปสู่ความคับข้องใจและการละทิ้งของผู้ใช้ โดยไม่คำนึงถึงตำแหน่งทางภูมิศาสตร์หรือข้อมูลจำเพาะของอุปกรณ์ของพวกเขา

ขอแนะนำ React Fiber: การเปลี่ยนกระบวนทัศน์สู่ Concurrent Rendering

เพื่อตอบสนองต่อข้อจำกัดที่เพิ่มขึ้นเหล่านี้ ทีมพัฒนา React ได้เริ่มต้นการเดินทางที่ทะเยอทะยานและพลิกโฉมเพื่อปรับสถาปัตยกรรมอัลกอริทึมการกระทบยอดหลักโดยพื้นฐาน ผลลัพธ์ของความพยายามอันยิ่งใหญ่นี้คือการถือกำเนิดของ React Fiber ซึ่งเป็นการนำไปใช้งานใหม่ทั้งหมดที่ออกแบบมาตั้งแต่ต้นเพื่อเปิดใช้งานการเรนเดอร์แบบเพิ่มทีละส่วน (incremental rendering) การออกแบบที่ปฏิวัติวงการนี้ช่วยให้ React สามารถหยุดและทำงานเรนเดอร์ต่อได้อย่างชาญฉลาด จัดลำดับความสำคัญของการอัปเดตที่สำคัญ และในที่สุดก็มอบประสบการณ์ผู้ใช้ที่ราบรื่น ตอบสนองได้ดีขึ้น และเป็นแบบ concurrent อย่างแท้จริง

Fiber คืออะไร? หน่วยพื้นฐานของการทำงาน

โดยแก่นแท้แล้ว Fiber คืออ็อบเจกต์ JavaScript ทั่วไปที่แสดงถึงหน่วยการทำงาน (unit of work) หนึ่งหน่วยอย่างพิถีพิถัน ในเชิงแนวคิด มันสามารถเปรียบได้กับ virtual stack frame พิเศษ แทนที่จะอาศัย call stack ดั้งเดิมของเบราว์เซอร์สำหรับการดำเนินการกระทบยอด React Fiber จะสร้างและจัดการ "stack frames" ภายในของตัวเอง ซึ่งแต่ละอันเรียกว่า Fiber อ็อบเจกต์ Fiber แต่ละตัวจะสอดคล้องโดยตรงกับอินสแตนซ์ของคอมโพเนนต์เฉพาะ (เช่น functional component, class component) อิลิเมนต์ DOM ดั้งเดิม (เช่น <div> หรือ <span>) หรือแม้แต่อ็อบเจกต์ JavaScript ธรรมดาที่แสดงถึงหน่วยงานที่แตกต่างกัน

อ็อบเจกต์ Fiber แต่ละตัวเต็มไปด้วยข้อมูลสำคัญที่ชี้นำกระบวนการกระทบยอด:

• type: กำหนดลักษณะของคอมโพเนนต์หรืออิลิเมนต์ (เช่น ฟังก์ชัน, คลาส, หรือสตริง host component เช่น 'div')
• key: แอตทริบิวต์ key ที่ไม่ซ้ำกันซึ่งกำหนดให้กับอิลิเมนต์ ซึ่งมีความสำคัญอย่างยิ่งต่อการเรนเดอร์รายการและคอมโพเนนต์ไดนามิกอย่างมีประสิทธิภาพ
• props: คุณสมบัติที่เข้ามาซึ่งส่งต่อไปยังคอมโพเนนต์จากพาเรนต์ของมัน
• stateNode: การอ้างอิงโดยตรงไปยังอิลิเมนต์ DOM จริงสำหรับ host components (เช่น <div> กลายเป็น divElement) หรือไปยังอินสแตนซ์ของ class component
• return: พอยน์เตอร์ชี้กลับไปยัง Fiber พาเรนต์ สร้างความสัมพันธ์แบบลำดับชั้นภายใน tree (คล้ายกับ return address ใน stack frame แบบดั้งเดิม)
• child: พอยน์เตอร์ชี้ไปยัง Fiber ลูกตัวแรกของโหนดปัจจุบัน
• sibling: พอยน์เตอร์ชี้ไปยัง Fiber พี่น้องตัวถัดไปในระดับเดียวกันใน tree
• pendingProps, memoizedProps, pendingState, memoizedState: คุณสมบัติเหล่านี้มีความสำคัญอย่างยิ่งต่อการติดตามและเปรียบเทียบ props/state ปัจจุบันและถัดไปอย่างมีประสิทธิภาพ ทำให้สามารถเพิ่มประสิทธิภาพได้ เช่น การข้ามการเรนเดอร์ซ้ำที่ไม่จำเป็น
• effectTag: บิตมาสก์ที่ระบุอย่างแม่นยำว่าต้องดำเนินการ side-effect ประเภทใดบน Fiber นี้ในระหว่าง commit phase ที่ตามมา (เช่น Placement สำหรับการแทรก, Update สำหรับการแก้ไข, Deletion สำหรับการลบ, Ref สำหรับการอัปเดต ref เป็นต้น)
• nextEffect: พอยน์เตอร์ชี้ไปยัง Fiber ถัดไปใน linked list เฉพาะของ Fibers ที่มี side-effects ทำให้ commit phase สามารถท่องไปเฉพาะโหนดที่ได้รับผลกระทบได้อย่างมีประสิทธิภาพ

ด้วยการเปลี่ยนกระบวนการกระทบยอดที่เคยเป็นแบบเรียกซ้ำให้เป็นแบบวนซ้ำ โดยใช้ประโยชน์จากพอยน์เตอร์ child, sibling, และ return ที่ชัดเจนเหล่านี้สำหรับการท่องไปใน tree ทำให้ Fiber มอบความสามารถที่ไม่เคยมีมาก่อนให้ React ในการจัดการคิวงานภายในของตัวเอง แนวทางที่ใช้ linked list แบบวนซ้ำนี้หมายความว่าตอนนี้ React สามารถหยุดประมวลผล component tree ณ จุดใดก็ได้ ปล่อยการควบคุมกลับไปยังเธรดหลักของเบราว์เซอร์ (เช่น เพื่อให้มันตอบสนองต่ออินพุตของผู้ใช้หรือเรนเดอร์เฟรมแอนิเมชัน) แล้วกลับมาทำงานต่อจากจุดที่ค้างไว้ได้อย่างราบรื่นในเวลาที่เหมาะสมกว่าในภายหลัง ความสามารถพื้นฐานนี้คือตัวเปิดใช้งานโดยตรงของการเรนเดอร์แบบ concurrent อย่างแท้จริง

ระบบ Dual Buffer: Current Tree และ WorkInProgress Tree

React Fiber ทำงานบนระบบ "dual buffer" ที่มีประสิทธิภาพสูง ซึ่งเกี่ยวข้องกับการรักษา Fiber tree ที่แตกต่างกันสองต้นไว้ในหน่วยความจำพร้อมกัน:

1. Current Tree: tree นี้แสดงถึงส่วนต่อประสานผู้ใช้ที่แสดงบนหน้าจอของผู้ใช้ในปัจจุบันอย่างแม่นยำ มันเป็นเวอร์ชันที่เสถียร, commit สมบูรณ์แล้ว และเป็นเวอร์ชันที่ใช้งานอยู่ของ UI ของแอปพลิเคชันของคุณ
2. WorkInProgress Tree: เมื่อใดก็ตามที่มีการอัปเดตเกิดขึ้นภายในแอปพลิเคชัน (เช่น การเปลี่ยนแปลง state, การอัปเดต prop หรือการเปลี่ยนแปลง context) React จะเริ่มสร้าง Fiber tree ใหม่ทั้งหมดในเบื้องหลังอย่างชาญฉลาด WorkInProgress tree นี้มีโครงสร้างเหมือนกับ Current Tree แต่เป็นที่ที่งานกระทบยอดที่หนักหน่วงทั้งหมดเกิดขึ้น React ทำสิ่งนี้ได้โดยการนำโหนด Fiber ที่มีอยู่จาก Current Tree กลับมาใช้ใหม่อย่างมีประสิทธิภาพและทำการคัดลอกที่ปรับให้เหมาะสม (หรือสร้างใหม่เมื่อจำเป็น) จากนั้นจึงนำการอัปเดตที่รอดำเนินการทั้งหมดไปใช้กับพวกมัน ที่สำคัญคือ กระบวนการเบื้องหลังทั้งหมดนี้เกิดขึ้นโดยไม่มีผลกระทบหรือการแก้ไขที่มองเห็นได้ต่อ UI ที่ใช้งานอยู่ที่ผู้ใช้กำลังโต้ตอบอยู่

เมื่อ WorkInProgress tree ถูกสร้างขึ้นอย่างพิถีพิถัน การคำนวณการกระทบยอดทั้งหมดเสร็จสมบูรณ์ และสมมติว่าไม่มีงานที่มีลำดับความสำคัญสูงกว่าเข้ามาแทรกแซงและขัดจังหวะกระบวนการ React จะทำการ "พลิก" (flip) ที่รวดเร็วและเป็นอะตอมมิกอย่างน่าทึ่ง มันเพียงแค่สลับพอยน์เตอร์: WorkInProgress tree ที่สร้างขึ้นใหม่จะกลายเป็น Current Tree ใหม่ทันที ทำให้การเปลี่ยนแปลงที่คำนวณไว้ทั้งหมดปรากฏแก่ผู้ใช้ในคราวเดียว Current Tree เก่า (ซึ่งตอนนี้ล้าสมัยแล้ว) จะถูกนำกลับมาใช้ใหม่และปรับเปลี่ยนเพื่อเป็น WorkInProgress tree ถัดไปสำหรับรอบการอัปเดตครั้งต่อไป การสลับแบบอะตอมมิกนี้มีความสำคัญสูงสุด มันรับประกันว่าผู้ใช้จะไม่เคยเห็น UI ที่อัปเดตบางส่วนหรือไม่สอดคล้องกัน แต่พวกเขาจะเห็นเพียงสถานะใหม่ที่สมบูรณ์ สอดคล้องกัน และเรนเดอร์อย่างเต็มรูปแบบเท่านั้น

สองเฟสของ React Fiber: Reconciliation (Render) และ Commit

การดำเนินงานภายในของ React Fiber ถูกจัดระเบียบอย่างพิถีพิถันเป็นสองเฟสที่แตกต่างและสำคัญ แต่ละเฟสมีวัตถุประสงค์เฉพาะและได้รับการออกแบบอย่างระมัดระวังเพื่ออำนวยความสะดวกในการประมวลผลที่สามารถขัดจังหวะได้และการอัปเดตที่มีประสิทธิภาพสูง เพื่อให้แน่ใจว่าผู้ใช้จะได้รับประสบการณ์ที่ลื่นไหลแม้ในระหว่างการเปลี่ยนแปลง UI ที่ซับซ้อน

เฟสที่ 1: Reconciliation (หรือ Render) Phase – หัวใจที่บริสุทธิ์และขัดจังหวะได้

เฟสเริ่มต้นนี้คือที่ที่ React ทำการคำนวณที่หนักหน่วงทั้งหมดเพื่อกำหนดอย่างแม่นยำว่าจำเป็นต้องเปลี่ยนแปลงอะไรบ้างเพื่ออัปเดตส่วนต่อประสานผู้ใช้ มักถูกเรียกว่าเฟส "บริสุทธิ์" (pure) เพราะในระหว่างขั้นตอนนี้ React จะหลีกเลี่ยงการก่อให้เกิด side-effects โดยตรงอย่างเคร่งครัด เช่น การแก้ไข DOM โดยตรง การส่งคำขอเครือข่าย หรือการเริ่มตัวจับเวลา ลักษณะเด่นของเฟสนี้คือธรรมชาติที่ขัดจังหวะได้ ซึ่งหมายความว่า React สามารถหยุดการทำงานชั่วคราว ณ จุดใดก็ได้ในระหว่างเฟสนี้ ปล่อยการควบคุมให้เบราว์เซอร์ และกลับมาทำงานต่อในภายหลัง หรือแม้กระทั่งทิ้งงานทั้งหมดหากมีการอัปเดตที่มีลำดับความสำคัญสูงกว่าเข้ามา

การท่องไปใน Tree แบบวนซ้ำและการประมวลผลงานโดยละเอียด

ตรงกันข้ามกับการเรียกแบบเรียกซ้ำของ reconciler แบบเก่า ตอนนี้ React ท่องไปใน WorkInProgress tree แบบวนซ้ำ มันทำสิ่งนี้ได้โดยใช้พอยน์เตอร์ child, sibling, และ return ของ Fiber อย่างชำนาญ สำหรับแต่ละ Fiber ที่พบในระหว่างการท่องไปนี้ React จะทำงานในสองขั้นตอนหลักที่กำหนดไว้อย่างดี:

• beginWork (เฟสขาลง - "ต้องทำอะไรบ้าง?"):

  ขั้นตอนนี้จะประมวลผล Fiber ในขณะที่ React เดินทางลงไปใน tree ไปยังลูกๆ ของมัน เป็นช่วงเวลาที่ React นำ Fiber ปัจจุบันจาก Current Tree ก่อนหน้าและโคลนมัน (หรือสร้างใหม่หากเป็นคอมโพเนนต์ใหม่) เข้าไปใน WorkInProgress Tree จากนั้นจะดำเนินการที่สำคัญ เช่น การอัปเดต props และ state สำหรับ class components นี่คือที่ที่ lifecycle methods เช่น static getDerivedStateFromProps ถูกเรียก และ shouldComponentUpdate ถูกตรวจสอบเพื่อพิจารณาว่าจำเป็นต้องเรนเดอร์ซ้ำหรือไม่ สำหรับ functional components, useState hooks จะถูกประมวลผลเพื่อคำนวณ state ถัดไป และ useRef, useContext, และ useEffect dependencies จะถูกประเมิน เป้าหมายหลักของ beginWork คือการเตรียมคอมโพเนนต์และลูกๆ ของมันสำหรับการประมวลผลต่อไป ซึ่งเป็นการกำหนด "หน่วยงานถัดไป" (ซึ่งโดยทั่วไปคือ Fiber ลูกตัวแรก) อย่างมีประสิทธิภาพ

  การเพิ่มประสิทธิภาพที่สำคัญเกิดขึ้นที่นี่: หากสามารถข้ามการอัปเดตของคอมโพเนนต์ได้อย่างมีประสิทธิภาพ (เช่น ถ้า shouldComponentUpdate คืนค่า false สำหรับ class component หรือถ้า functional component ถูก memoized ด้วย React.memo และ props ของมันไม่ได้เปลี่ยนแปลงแบบตื้นๆ) React จะข้ามการประมวลผลลูกๆ ทั้งหมดของคอมโพเนนต์นั้นอย่างชาญฉลาด ซึ่งนำไปสู่การเพิ่มประสิทธิภาพอย่างมีนัยสำคัญ โดยเฉพาะใน subtrees ขนาดใหญ่และเสถียร

• completeWork (เฟสขาขึ้น - "การรวบรวม Effects"):

  ขั้นตอนนี้จะประมวลผล Fiber ในขณะที่ React เดินทางขึ้นไปบน tree หลังจากที่ลูกๆ ทั้งหมดของมันถูกประมวลผลอย่างสมบูรณ์แล้ว นี่คือที่ที่ React สิ้นสุดการทำงานสำหรับ Fiber ปัจจุบัน สำหรับ host components (เช่น <div> หรือ <p>), completeWork มีหน้าที่สร้างหรืออัปเดตโหนด DOM จริงและเตรียมคุณสมบัติของพวกมัน (แอตทริบิวต์, event listeners, สไตล์) ที่สำคัญ ในระหว่างขั้นตอนนี้ React จะรวบรวม "effect tags" และแนบเข้ากับ Fiber แท็กเหล่านี้เป็นบิตมาสก์น้ำหนักเบาที่ระบุอย่างแม่นยำว่าต้องดำเนินการ side-effect ประเภทใดบน Fiber นี้ในระหว่าง commit phase ที่ตามมา (เช่น อิลิเมนต์ต้องถูกแทรก, อัปเดต, หรือลบ; ref ต้องถูกแนบ/ถอด; lifecycle method ต้องถูกเรียก) ไม่มีการเปลี่ยนแปลง DOM จริงเกิดขึ้นที่นี่ พวกมันเพียงแค่ถูกทำเครื่องหมายไว้สำหรับการดำเนินการในอนาคต การแยกส่วนนี้ช่วยให้มั่นใจถึงความบริสุทธิ์ในเฟส reconciliation

เฟส reconciliation จะดำเนินการประมวลผล Fibers ต่อไปเรื่อยๆ จนกว่าจะไม่มีงานเหลือให้ทำสำหรับระดับความสำคัญปัจจุบัน หรือจนกว่า React จะพิจารณาว่าต้องปล่อยการควบคุมกลับไปยังเบราว์เซอร์ (เช่น เพื่อให้สามารถรับอินพุตของผู้ใช้หรือเพื่อให้ถึงอัตราเฟรมเป้าหมายสำหรับแอนิเมชัน) หากถูกขัดจังหวะ React จะจดจำความคืบหน้าของมันไว้อย่างพิถีพิถัน ทำให้สามารถกลับมาทำงานต่อจากจุดที่ค้างไว้ได้อย่างราบรื่น หรืออีกทางหนึ่ง หากมีการอัปเดตที่มีลำดับความสำคัญสูงกว่า (เช่น การคลิกของผู้ใช้) มาถึง React สามารถทิ้งงานที่มีลำดับความสำคัญต่ำกว่าที่ทำเสร็จบางส่วนไปอย่างชาญฉลาดและเริ่มกระบวนการ reconciliation ใหม่ด้วยการอัปเดตที่เร่งด่วนใหม่ เพื่อให้แน่ใจว่าผู้ใช้ทั่วโลกจะได้รับการตอบสนองที่ดีที่สุด

เฟสที่ 2: Commit Phase – การทำงานที่ไม่บริสุทธิ์และขัดจังหวะไม่ได้

เมื่อเฟส reconciliation เสร็จสิ้นการคำนวณและสร้าง WorkInProgress tree ที่สอดคล้องกันอย่างสมบูรณ์ พร้อมทั้งทำเครื่องหมายด้วย effect tags ที่จำเป็นทั้งหมดแล้ว React จะเปลี่ยนเข้าสู่ commit phase เฟสนี้แตกต่างโดยพื้นฐาน: มันเป็นแบบ synchronous และไม่สามารถขัดจังหวะได้ นี่คือช่วงเวลาที่สำคัญที่ React นำการเปลี่ยนแปลงที่คำนวณไว้ทั้งหมดมาใช้กับ DOM จริงอย่างเป็นอะตอมมิก ทำให้ผู้ใช้มองเห็นได้ทันที

การดำเนินการ Side Effects ในลักษณะที่ควบคุมได้

commit phase เองถูกแบ่งออกเป็นสามเฟสย่อยที่แตกต่างกันอย่างระมัดระวัง ซึ่งแต่ละเฟสออกแบบมาเพื่อจัดการกับ side-effects ประเภทเฉพาะตามลำดับที่แม่นยำ:

• beforeMutation (Layout Effects ก่อนการเปลี่ยนแปลง):

  เฟสย่อยนี้จะทำงานแบบ synchronous ทันทีหลังจากเฟส reconciliation สิ้นสุดลง แต่ที่สำคัญคือ *ก่อน* ที่การเปลี่ยนแปลง DOM ใดๆ จะปรากฏให้ผู้ใช้เห็น นี่คือที่ที่ React เรียก getSnapshotBeforeUpdate สำหรับ class components เพื่อให้นักพัฒนามีโอกาสสุดท้ายในการจับข้อมูลจาก DOM (เช่น ตำแหน่งการเลื่อนปัจจุบัน, ขนาดของอิลิเมนต์) *ก่อน* ที่ DOM อาจเปลี่ยนแปลงเนื่องจากการเปลี่ยนแปลงที่จะเกิดขึ้น สำหรับ functional components นี่คือช่วงเวลาที่แม่นยำที่ callback ของ useLayoutEffect จะถูกดำเนินการ useLayoutEffect hooks เหล่านี้ขาดไม่ได้สำหรับสถานการณ์ที่คุณต้องการอ่านเลย์เอาต์ DOM ปัจจุบัน (เช่น ความสูงของอิลิเมนต์, ตำแหน่งการเลื่อน) แล้วทำการเปลี่ยนแปลงแบบ synchronous ทันทีโดยอิงจากข้อมูลนั้น โดยไม่ทำให้ผู้ใช้เห็นภาพกระพริบหรือไม่สอดคล้องกัน ตัวอย่างเช่น หากคุณกำลังสร้างแอปพลิเคชันแชทและต้องการรักษำแหน่งการเลื่อนไว้ที่ด้านล่างเมื่อมีข้อความใหม่มาถึง useLayoutEffect เหมาะอย่างยิ่งที่จะอ่านความสูงของการเลื่อนก่อนที่ข้อความใหม่จะถูกแทรก แล้วจึงปรับเปลี่ยนมัน

• mutation (การเปลี่ยนแปลง DOM จริง):

  นี่คือส่วนกลางของ commit phase ที่การเปลี่ยนแปลงทางภาพเกิดขึ้น React จะท่องไปใน linked list ที่มีประสิทธิภาพของ effect tags (ที่สร้างขึ้นระหว่างขั้นตอน completeWork ของเฟส reconciliation) และดำเนินการ DOM จริงทั้งหมด ซึ่งรวมถึงการแทรกโหนด DOM ใหม่ (appendChild), การอัปเดตแอตทริบิวต์และเนื้อหาข้อความบนโหนดที่มีอยู่ (setAttribute, textContent), และการลบโหนดเก่าที่ไม่จำเป็น (removeChild) นี่คือจุดที่แน่นอนที่ส่วนต่อประสานผู้ใช้เปลี่ยนแปลงอย่างเห็นได้ชัดบนหน้าจอ เนื่องจากเป็นแบบ synchronous การเปลี่ยนแปลงทั้งหมดจึงเกิดขึ้นพร้อมกัน ทำให้ได้สถานะภาพที่สอดคล้องกัน

• layout (Layout Effects หลังการเปลี่ยนแปลง):

  หลังจากที่การเปลี่ยนแปลง DOM ที่คำนวณไว้ทั้งหมดถูกนำไปใช้เรียบร้อยและ UI ได้รับการอัปเดตอย่างสมบูรณ์แล้ว เฟสย่อยสุดท้ายนี้จะทำงาน เป็นที่ที่ React เรียก lifecycle methods เช่น componentDidMount (สำหรับคอมโพเนนต์ที่เพิ่ง mount) และ componentDidUpdate (สำหรับคอมโพเนนต์ที่อัปเดต) สำหรับ class components ที่สำคัญ นี่เป็นช่วงเวลาที่ callback ของ useEffect สำหรับ functional components จะถูกดำเนินการ (โปรดทราบ: useLayoutEffect ทำงานไปก่อนหน้านี้แล้ว) useEffect hooks เหล่านี้เหมาะอย่างยิ่งสำหรับการดำเนินการ side-effects ที่ไม่จำเป็นต้องบล็อกรอบการวาดภาพของเบราว์เซอร์ เช่น การเริ่มต้นคำขอเครือข่าย, การตั้งค่าการสมัครรับข้อมูลจากแหล่งข้อมูลภายนอก, หรือการลงทะเบียน global event listeners เนื่องจาก DOM ได้รับการอัปเดตอย่างสมบูรณ์ ณ จุดนี้ นักพัฒนาจึงสามารถเข้าถึงคุณสมบัติของมันและดำเนินการได้อย่างมั่นใจโดยไม่ต้องกังวลเกี่ยวกับ race conditions หรือสถานะที่ไม่สอดคล้องกัน

commit phase นั้นเป็นแบบ synchronous โดยเนื้อแท้ เพราะการใช้การเปลี่ยนแปลง DOM แบบเพิ่มทีละส่วนจะนำไปสู่ความไม่สอดคล้องกันทางภาพที่ไม่พึงประสงค์อย่างยิ่ง, การกระพริบ, และประสบการณ์ผู้ใช้ที่โดยทั่วไปแล้วไม่ต่อเนื่องกัน ลักษณะที่เป็น synchronous ของมันช่วยให้มั่นใจได้ว่าผู้ใช้จะรับรู้ถึงสถานะ UI ที่สอดคล้อง, สมบูรณ์, และอัปเดตอย่างเต็มรูปแบบเสมอ โดยไม่คำนึงถึงความซับซ้อนของการอัปเดต

การจัดตารางเวลาใน React Fiber: การจัดลำดับความสำคัญอัจฉริยะและ Time Slicing

ความสามารถที่ก้าวล้ำของ Fiber ในการหยุดและทำงานต่อในเฟส reconciliation จะไม่มีประสิทธิภาพเลยหากไม่มีกลไกที่ซับซ้อนและชาญฉลาดในการตัดสินใจว่า *เมื่อใด* ที่จะทำงาน และที่สำคัญคือ *งานใด* ที่จะจัดลำดับความสำคัญ นี่คือจุดที่ Scheduler อันทรงพลังของ React เข้ามามีบทบาท โดยทำหน้าที่เป็นผู้ควบคุมการจราจรอัจฉริยะสำหรับการอัปเดตทั้งหมดของ React

Cooperative Scheduling: การทำงานร่วมกับเบราว์เซอร์

Scheduler ของ React Fiber ไม่ได้ขัดจังหวะหรือยึดการควบคุมจากเบราว์เซอร์โดยพลการ แต่ทำงานบนหลักการของความร่วมมือ มันใช้ประโยชน์จาก API มาตรฐานของเบราว์เซอร์ เช่น requestIdleCallback (เหมาะสำหรับการจัดตารางงานที่มีลำดับความสำคัญต่ำและไม่จำเป็นซึ่งสามารถทำงานได้เมื่อเบราว์เซอร์ว่าง) และ requestAnimationFrame (สงวนไว้สำหรับงานที่มีลำดับความสำคัญสูง เช่น แอนิเมชันและการอัปเดตภาพที่สำคัญซึ่งต้องซิงโครไนซ์กับรอบการวาดภาพซ้ำของเบราว์เซอร์) เพื่อจัดตารางงานอย่างมีกลยุทธ์ โดยพื้นฐานแล้ว Scheduler จะสื่อสารกับเบราว์เซอร์โดยถามว่า "เบราว์เซอร์ที่รัก คุณมีเวลาว่างก่อนที่เฟรมภาพถัดไปจะต้องถูกวาดหรือไม่? ถ้ามี ฉันมีงานคำนวณบางอย่างที่อยากจะทำ" หากเบราว์เซอร์กำลังยุ่งอยู่ (เช่น กำลังประมวลผลอินพุตของผู้ใช้ที่ซับซ้อน, เรนเดอร์แอนิเมชันที่สำคัญ, หรือจัดการกับเหตุการณ์ดั้งเดิมที่มีลำดับความสำคัญสูงอื่นๆ) React จะยอมปล่อยการควบคุมอย่างนุ่มนวล เพื่อให้เบราว์เซอร์สามารถจัดลำดับความสำคัญของงานที่จำเป็นของตัวเองได้

โมเดลการจัดตารางเวลาแบบร่วมมือนี้ช่วยให้ React สามารถทำงานเป็นชิ้นๆ ที่จัดการได้ โดยปล่อยการควบคุมกลับไปยังเบราว์เซอร์เป็นระยะๆ หากมีเหตุการณ์ที่มีลำดับความสำคัญสูงกว่าเกิดขึ้นอย่างกะทันหัน (เช่น ผู้ใช้พิมพ์อย่างรวดเร็วในช่องป้อนข้อมูลซึ่งต้องการการตอบสนองทางภาพทันที หรือการคลิกปุ่มที่สำคัญ) React สามารถหยุดงานที่มีลำดับความสำคัญต่ำกว่าในปัจจุบันได้ทันที จัดการกับเหตุการณ์เร่งด่วนได้อย่างมีประสิทธิภาพ แล้วอาจกลับมาทำงานที่หยุดไว้ต่อในภายหลัง หรือแม้กระทั่งทิ้งงานนั้นไปและเริ่มใหม่หากการอัปเดตที่มีลำดับความสำคัญสูงกว่าทำให้งานก่อนหน้าล้าสมัย การจัดลำดับความสำคัญแบบไดนามิกนี้เป็นกุญแจสำคัญอย่างยิ่งในการรักษาการตอบสนองและความลื่นไหลอันเป็นที่รู้จักของ React ในสถานการณ์การใช้งานที่หลากหลายทั่วโลก

Time Slicing: การแบ่งย่อยงานเพื่อการตอบสนองที่ต่อเนื่อง

Time slicing เป็นเทคนิคปฏิวัติที่เป็นแกนหลักซึ่งเปิดใช้งานโดยตรงโดยเฟส reconciliation ที่สามารถขัดจังหวะได้ของ Fiber แทนที่จะดำเนินการงานชิ้นใหญ่ชิ้นเดียวในคราวเดียว (ซึ่งจะบล็อกเธรดหลัก) React จะแบ่งกระบวนการ reconciliation ทั้งหมดออกเป็น "time slices" ที่เล็กลงและจัดการได้ง่ายขึ้นอย่างชาญฉลาด ในระหว่างแต่ละ time slice ที่จัดสรรไว้ React จะประมวลผลงานในปริมาณที่จำกัดและกำหนดไว้ล่วงหน้า (เช่น Fibers สองสามตัว) หาก time slice ที่จัดสรรไว้กำลังจะหมดลง หรือหากมีงานที่มีลำดับความสำคัญสูงกว่าพร้อมใช้งานและต้องการความสนใจทันที React สามารถหยุดงานปัจจุบันชั่วคราวอย่างนุ่มนวลและปล่อยการควบคุมกลับไปยังเบราว์เซอร์

สิ่งนี้ช่วยให้มั่นใจได้ว่าเธรดหลักของเบราว์เซอร์ยังคงตอบสนองอย่างสม่ำเสมอ ทำให้สามารถวาดเฟรมใหม่ ตอบสนองต่ออินพุตของผู้ใช้ทันที และจัดการกับงานที่สำคัญอื่นๆ ได้โดยไม่หยุดชะงัก ประสบการณ์ของผู้ใช้จะรู้สึกราบรื่นและลื่นไหลมากขึ้นอย่างมีนัยสำคัญ เพราะแม้ในช่วงที่มีการอัปเดต UI อย่างหนัก แอปพลิเคชันยังคงมีการโต้ตอบและตอบสนองได้ โดยไม่มีการค้างหรือกระตุกที่สังเกตได้ สิ่งนี้มีความสำคัญอย่างยิ่งต่อการรักษาการมีส่วนร่วมของผู้ใช้ โดยเฉพาะอย่างยิ่งสำหรับผู้ใช้บนอุปกรณ์มือถือหรือผู้ที่มีการเชื่อมต่ออินเทอร์เน็ตที่ไม่แข็งแรงในตลาดเกิดใหม่

Lane Model สำหรับการจัดลำดับความสำคัญที่ละเอียด

ในตอนแรก React ใช้ระบบลำดับความสำคัญที่ง่ายกว่า (อิงตาม expirationTime) ด้วยการมาถึงของ Fiber สิ่งนี้ได้พัฒนาไปสู่ Lane Model ที่ซับซ้อนและทรงพลังอย่างยิ่ง Lane Model เป็นระบบบิตมาสก์ขั้นสูงที่ช่วยให้ React สามารถกำหนดระดับความสำคัญที่แตกต่างกันให้กับการอัปเดตประเภทต่างๆ ได้ เราสามารถจินตนาการได้ว่าเป็นชุดของ "เลน" เฉพาะบนทางหลวงหลายเลน โดยแต่ละเลนถูกกำหนดไว้สำหรับประเภทการจราจรที่เฉพาะเจาะจง โดยบางเลนรองรับการจราจรที่เร็วกว่าและเร่งด่วนกว่า และเลนอื่นๆ สงวนไว้สำหรับงานที่ช้ากว่าและมีความสำคัญน้อยกว่าในด้านเวลา

แต่ละเลนภายในโมเดลจะแสดงถึงระดับความสำคัญที่เฉพาะเจาะจง เมื่อมีการอัปเดตเกิดขึ้นภายในแอปพลิเคชัน React (เช่น การเปลี่ยนแปลง state, การเปลี่ยนแปลง prop, การเรียก setState โดยตรง, หรือ forceUpdate) มันจะถูกกำหนดให้กับเลนเฉพาะหนึ่งเลนหรือมากกว่าอย่างพิถีพิถัน โดยขึ้นอยู่กับประเภท, ความเร่งด่วน, และบริบทที่มันถูกกระตุ้น เลนทั่วไป ได้แก่:

• Sync Lane: สงวนไว้สำหรับการอัปเดตแบบ synchronous ที่สำคัญซึ่งต้องเกิดขึ้นทันทีและไม่สามารถเลื่อนออกไปได้ (เช่น การอัปเดตที่เกิดจาก ReactDOM.flushSync())
• Input/Discrete Lanes: กำหนดให้กับการโต้ตอบของผู้ใช้โดยตรงที่ต้องการการตอบสนองแบบ synchronous และทันที เช่น การคลิกปุ่ม, การกดปุ่มในช่องป้อนข้อมูล, หรือการลากและวาง สิ่งเหล่านี้มีความสำคัญสูงสุดเพื่อรับประกันการตอบสนองของผู้ใช้ที่ทันทีและลื่นไหล
• Animation/Continuous Lanes: อุทิศให้กับการอัปเดตที่เกี่ยวข้องกับแอนิเมชันหรือเหตุการณ์ต่อเนื่องที่มีความถี่สูง เช่น การเคลื่อนไหวของเมาส์ (mousemove) หรือเหตุการณ์สัมผัส (touchmove) การอัปเดตเหล่านี้ยังต้องการลำดับความสำคัญสูงเพื่อรักษาความลื่นไหลของภาพ
• Default Lane: ลำดับความสำคัญมาตรฐานที่กำหนดให้กับการเรียก setState ส่วนใหญ่และการอัปเดตคอมโพเนนต์ทั่วไป การอัปเดตเหล่านี้โดยทั่วไปจะถูกจัดกลุ่มและประมวลผลอย่างมีประสิทธิภาพ
• Transition Lanes: ส่วนเสริมที่ใหม่และทรงพลังกว่า สำหรับการเปลี่ยน UI ที่ไม่เร่งด่วนซึ่งสามารถขัดจังหวะหรือแม้กระทั่งยกเลิกได้อย่างชาญฉลาดหากมีงานที่มีลำดับความสำคัญสูงกว่าเกิดขึ้น ตัวอย่างเช่น การกรองรายการขนาดใหญ่, การนำทางไปยังหน้าใหม่ที่การตอบสนองทางภาพทันทีไม่สำคัญ, หรือการดึงข้อมูลสำหรับมุมมองรอง การใช้ startTransition หรือ useTransition จะทำเครื่องหมายการอัปเดตเหล่านี้ ทำให้ React สามารถรักษา UI ให้ตอบสนองต่อการโต้ตอบที่เร่งด่วนได้
• Deferred/Idle Lanes: สงวนไว้สำหรับงานเบื้องหลังที่ไม่สำคัญต่อการตอบสนองของ UI ทันทีและสามารถรอได้อย่างปลอดภัยจนกว่าเบราว์เซอร์จะว่างสนิท ตัวอย่างอาจเป็นการบันทึกข้อมูลการวิเคราะห์หรือการดึงทรัพยากรล่วงหน้าสำหรับการโต้ตอบในอนาคตที่เป็นไปได้

เมื่อ Scheduler ของ React ตัดสินใจว่าจะทำงานใดต่อไป มันจะตรวจสอบเลนที่มีลำดับความสำคัญสูงสุดก่อนเสมอ หากมีการอัปเดตที่มีลำดับความสำคัญสูงกว่ามาถึงอย่างกะทันหันในขณะที่การอัปเดตที่มีลำดับความสำคัญต่ำกว่ากำลังถูกประมวลผลอยู่ React สามารถหยุดงานที่มีลำดับความสำคัญต่ำกว่าที่กำลังดำเนินอยู่ได้อย่างชาญฉลาด จัดการกับงานเร่งด่วนได้อย่างมีประสิทธิภาพ แล้วจึงกลับมาทำงานที่หยุดไว้ก่อนหน้าได้อย่างราบรื่น หรือหากงานที่มีลำดับความสำคัญสูงกว่าทำให้งานที่หยุดไว้ไม่เกี่ยวข้องอีกต่อไป ก็จะทิ้งงานนั้นไปทั้งหมดและเริ่มใหม่ กลไกการจัดลำดับความสำคัญแบบไดนามิกและปรับเปลี่ยนได้สูงนี้เป็นหัวใจสำคัญของความสามารถของ React ในการรักษาการตอบสนองที่ยอดเยี่ยมและมอบประสบการณ์ผู้ใช้ที่ราบรื่นอย่างสม่ำเสมอในพฤติกรรมของผู้ใช้และภาระของระบบต่างๆ

ประโยชน์และผลกระทบอันลึกซึ้งของสถาปัตยกรรม React Fiber

การปรับสถาปัตยกรรมครั้งปฏิวัติสู่ Fiber ได้วางรากฐานที่ขาดไม่ได้สำหรับคุณสมบัติที่ทันสมัยและทรงพลังที่สุดหลายอย่างของ React มันได้ปรับปรุงลักษณะการทำงานพื้นฐานของเฟรมเวิร์กอย่างลึกซึ้ง มอบประโยชน์ที่จับต้องได้ให้กับทั้งนักพัฒนาและผู้ใช้ปลายทางทั่วโลก

1. ประสบการณ์ผู้ใช้ที่ราบรื่นและการตอบสนองที่ดียิ่งขึ้นอย่างหาที่เปรียบมิได้

นี่คือผลงานที่ตรงไปตรงมา มองเห็นได้ และมีผลกระทบมากที่สุดของ Fiber อย่างไม่ต้องสงสัย ด้วยการเปิดใช้งานการเรนเดอร์ที่ขัดจังหวะได้และการแบ่งส่วนเวลาที่ซับซ้อน แอปพลิเคชัน React ในปัจจุบันจึงรู้สึกได้ถึงความลื่นไหล ตอบสนอง และโต้ตอบได้มากขึ้นอย่างมาก การอัปเดต UI ที่ซับซ้อนและใช้การคำนวณสูงไม่รับประกันว่าจะบล็อกเธรดหลักของเบราว์เซอร์อีกต่อไป ซึ่งช่วยขจัด "jank" ที่น่ารำคาญซึ่งเคยเป็นปัญหาในเวอร์ชันก่อนหน้า การปรับปรุงนี้มีความสำคัญอย่างยิ่งสำหรับผู้ใช้บนอุปกรณ์มือถือที่ทรงพลังน้อยกว่า ผู้ที่เข้าถึงอินเทอร์เน็ตผ่านการเชื่อมต่อเครือข่ายที่ช้ากว่า หรือบุคคลในภูมิภาคที่มีโครงสร้างพื้นฐานจำกัด ทำให้มั่นใจได้ว่าผู้ใช้ทุกคนทุกแห่งจะได้รับประสบการณ์ที่เท่าเทียม น่าดึงดูด และน่าพึงพอใจมากขึ้น

2. ตัวเปิดใช้งาน Concurrent Mode (ปัจจุบันคือ "Concurrent Features")

Fiber เป็นข้อกำหนดเบื้องต้นที่สมบูรณ์และไม่สามารถต่อรองได้สำหรับ Concurrent Mode (ซึ่งปัจจุบันเรียกว่า "Concurrent Features" อย่างถูกต้องมากขึ้นในเอกสารอย่างเป็นทางการของ React) Concurrent Mode เป็นชุดความสามารถที่ก้าวล้ำซึ่งช่วยให้ React สามารถทำงานหลายอย่างพร้อมกันได้อย่างมีประสิทธิภาพ จัดลำดับความสำคัญของงานบางอย่างเหนือกว่างานอื่น ๆ และแม้กระทั่งรักษา UI "เวอร์ชัน" หลายเวอร์ชันไว้ในหน่วยความจำพร้อมกันก่อนที่จะ commit เวอร์ชันสุดท้ายที่เหมาะสมที่สุดไปยัง DOM จริง ความสามารถพื้นฐานนี้ช่วยให้เกิดคุณสมบัติอันทรงพลัง เช่น:

• Suspense for Data Fetching: คุณสมบัตินี้ช่วยให้นักพัฒนาสามารถ "ระงับ" การเรนเดอร์ของคอมโพเนนต์อย่างประกาศ (declaratively) จนกว่าข้อมูลที่จำเป็นทั้งหมดจะพร้อมและใช้งานได้ ในระหว่างช่วงเวลารอ React จะแสดง UI สำรองที่ผู้ใช้กำหนดโดยอัตโนมัติ (เช่น สปินเนอร์โหลด) สิ่งนี้ช่วยลดความซับซ้อนในการจัดการสถานะการโหลดข้อมูลที่ซับซ้อนได้อย่างมาก นำไปสู่โค้ดที่สะอาดและอ่านง่ายขึ้น และประสบการณ์ผู้ใช้ที่เหนือกว่า โดยเฉพาะอย่างยิ่งเมื่อต้องรับมือกับเวลาตอบสนองของ API ที่แตกต่างกันไปในแต่ละภูมิภาคทางภูมิศาสตร์
• Transitions: นักพัฒนาสามารถทำเครื่องหมายการอัปเดตบางอย่างว่าเป็น "transitions" (เช่น การอัปเดตที่ไม่เร่งด่วน) ได้อย่างชัดเจนโดยใช้ startTransition หรือ useTransition สิ่งนี้จะสั่งให้ React จัดลำดับความสำคัญของการอัปเดตที่เร่งด่วนกว่า (เช่น อินพุตโดยตรงจากผู้ใช้) และอาจแสดง UI ที่ "เก่า" หรือไม่ล่าสุดชั่วคราวในขณะที่งานที่ทำเครื่องหมายเป็น transition กำลังถูกคำนวณในเบื้องหลัง ความสามารถนี้มีพลังมหาศาลในการรักษา UI ที่โต้ตอบได้และตอบสนองได้แม้ในช่วงเวลาที่มีการดึงข้อมูลช้า การคำนวณหนัก หรือการเปลี่ยนแปลงเส้นทางที่ซับซ้อน ทำให้ได้รับประสบการณ์ที่ราบรื่นแม้ว่าความหน่วงของแบ็กเอนด์จะแตกต่างกันไปทั่วโลก

คุณสมบัติที่พลิกโฉมเหล่านี้ ซึ่งขับเคลื่อนและเปิดใช้งานโดยตรงโดยสถาปัตยกรรม Fiber ที่อยู่เบื้องหลัง ช่วยให้นักพัฒนาสามารถสร้างอินเทอร์เฟซที่ยืดหยุ่น มีประสิทธิภาพ และใช้งานง่ายมากขึ้น แม้ในสถานการณ์ที่เกี่ยวข้องกับการพึ่งพาข้อมูลที่ซับซ้อน การดำเนินการที่ใช้การคำนวณสูง หรือเนื้อหาที่มีไดนามิกสูงซึ่งต้องทำงานได้อย่างไม่มีที่ติทั่วโลก

3. Error Boundaries ที่ได้รับการปรับปรุงและความยืดหยุ่นของแอปพลิเคชันที่เพิ่มขึ้น

การแบ่งงานอย่างมีกลยุทธ์ของ Fiber ออกเป็นเฟสที่แตกต่างและจัดการได้ยังนำมาซึ่งการปรับปรุงที่สำคัญในการจัดการข้อผิดพลาด เฟส reconciliation ซึ่งบริสุทธิ์และปราศจาก side-effect ทำให้มั่นใจได้ว่าข้อผิดพลาดที่เกิดขึ้นระหว่างขั้นตอนการคำนวณนี้จะง่ายต่อการจับและจัดการมากขึ้นโดยไม่ทำให้ UI อยู่ในสถานะที่ไม่สอดคล้องกันหรือเสียหาย Error Boundaries ซึ่งเป็นคุณสมบัติที่สำคัญที่เปิดตัวในช่วงเวลาเดียวกับ Fiber ใช้ประโยชน์จากความบริสุทธิ์นี้ได้อย่างสง่างาม พวกมันช่วยให้นักพัฒนาสามารถจับและจัดการข้อผิดพลาด JavaScript ในส่วนเฉพาะของ UI tree ได้อย่างนุ่มนวล ป้องกันไม่ให้ข้อผิดพลาดของคอมโพเนนต์เดียวลุกลามและทำให้แอปพลิเคชันทั้งหมดล่ม ซึ่งจะช่วยเพิ่มเสถียรภาพและความน่าเชื่อถือโดยรวมของแอปพลิเคชันที่ปรับใช้ทั่วโลก

4. การนำงานกลับมาใช้ใหม่ที่ปรับให้เหมาะสมและประสิทธิภาพในการคำนวณ

ระบบ dual buffer พร้อมด้วย Current และ WorkInProgress trees หมายความว่า React สามารถนำโหนด Fiber กลับมาใช้ใหม่ได้อย่างมีประสิทธิภาพเป็นพิเศษ เมื่อมีการอัปเดตเกิดขึ้น React ไม่จำเป็นต้องสร้าง tree ทั้งหมดขึ้นมาใหม่ แต่จะโคลนและแก้ไขเฉพาะโหนดที่มีอยู่จาก Current Tree ที่จำเป็นอย่างชาญฉลาด ประสิทธิภาพด้านหน่วยความจำที่มีมาแต่กำเนิดนี้ ประกอบกับความสามารถของ Fiber ในการหยุดและทำงานต่อ หมายความว่าหากงานที่มีลำดับความสำคัญต่ำถูกขัดจังหวะแล้วกลับมาทำงานต่อในภายหลัง React มักจะสามารถทำงานต่อจากจุดที่ค้างไว้ได้อย่างแม่นยำ หรืออย่างน้อยที่สุดก็นำโครงสร้างที่สร้างขึ้นบางส่วนกลับมาใช้ใหม่ ซึ่งช่วยลดการคำนวณซ้ำซ้อนและปรับปรุงประสิทธิภาพการประมวลผลโดยรวมได้อย่างมีนัยสำคัญ

5. การดีบักคอขวดด้านประสิทธิภาพที่คล่องตัวขึ้น

แม้ว่าการทำงานภายในของ Fiber จะซับซ้อนอย่างไม่ต้องสงสัย แต่ความเข้าใจในแนวคิดที่แข็งแกร่งเกี่ยวกับสองเฟสที่แตกต่างกัน (Reconciliation และ Commit) และแนวคิดหลักของงานที่ขัดจังหวะได้สามารถให้ข้อมูลเชิงลึกอันล้ำค่าสำหรับการดีบักปัญหาที่เกี่ยวข้องกับประสิทธิภาพ หากคอมโพเนนต์เฉพาะทำให้เกิด "jank" ที่เห็นได้ชัด ปัญหามักจะสืบย้อนไปถึงการคำนวณที่มีราคาแพงและไม่ได้รับการปรับให้เหมาะสมซึ่งเกิดขึ้นภายในเฟส render (เช่น คอมโพเนนต์ที่ไม่ได้ถูก memoized ด้วย React.memo หรือ useCallback) การทำความเข้าใจ Fiber ช่วยให้นักพัฒนาสามารถระบุได้ว่าคอขวดด้านประสิทธิภาพอยู่ในตรรกะการเรนเดอร์เอง (เฟส reconciliation) หรืออยู่ในการจัดการ DOM โดยตรงที่เกิดขึ้นแบบ synchronous (เฟส commit อาจเนื่องมาจาก useLayoutEffect หรือ callback ของ componentDidMount ที่ซับซ้อนเกินไป) สิ่งนี้ช่วยให้สามารถเพิ่มประสิทธิภาพได้อย่างตรงจุดและมีประสิทธิภาพมากขึ้น

นัยเชิงปฏิบัติสำหรับนักพัฒนา: การใช้ประโยชน์จาก Fiber เพื่อแอปที่ดีขึ้น

ในขณะที่ React Fiber ส่วนใหญ่ทำงานเป็นนามธรรมที่ทรงพลังอยู่เบื้องหลัง ความเข้าใจในหลักการของมันช่วยให้นักพัฒนาสามารถเขียนแอปพลิเคชันที่มีประสิทธิภาพ แข็งแกร่ง และเป็นมิตรกับผู้ใช้มากขึ้นอย่างมีนัยสำคัญสำหรับผู้ชมทั่วโลกที่หลากหลาย นี่คือวิธีที่ความเข้าใจนี้แปลไปสู่แนวทางการพัฒนาที่นำไปปฏิบัติได้:

1. ยอมรับ Pure Components และการ Memoization เชิงกลยุทธ์

เฟส reconciliation ของ Fiber ได้รับการปรับให้เหมาะสมอย่างยิ่งเพื่อข้ามงานที่ไม่จำเป็น ด้วยการทำให้แน่ใจว่า functional components ของคุณเป็น "pure" (หมายความว่าพวกมันจะเรนเดอร์เอาต์พุตเดียวกันเสมอเมื่อได้รับ props และ state เดียวกัน) แล้วห่อหุ้มด้วย React.memo คุณกำลังให้สัญญาณที่ชัดเจนแก่ React ให้ข้ามการประมวลผลของคอมโพเนนต์นั้นและ subtree ลูกทั้งหมดของมันหาก props และ state ของมันไม่ได้เปลี่ยนแปลงแบบตื้นๆ นี่เป็นกลยุทธ์การเพิ่มประสิทธิภาพที่สำคัญอย่างยิ่ง โดยเฉพาะอย่างยิ่งสำหรับ component trees ขนาดใหญ่และซับซ้อน ซึ่งช่วยลดภาระงานที่ React ต้องทำ

            import React from 'react';

const MyPureComponent = React.memo(({ data, onClick }) => {
  console.log('Rendering MyPureComponent');
  return <div onClick={onClick}>{data.name}</div>;
});

// In parent component:
const parentClickHandler = React.useCallback(() => {
  // Handle click
}, []);

<MyPureComponent data={{ name: 'Item A' }} onClick={parentClickHandler} />

            

              
                Copy
              
            
          

ในทำนองเดียวกัน การใช้ useCallback สำหรับฟังก์ชันและ useMemo สำหรับค่าที่ใช้การคำนวณสูงซึ่งส่งต่อไปเป็น props ให้กับคอมโพเนนต์ลูกอย่างรอบคอบก็มีความสำคัญเช่นกัน สิ่งนี้ช่วยให้แน่ใจว่า props มีความเท่าเทียมกันทางอ้างอิงระหว่างการเรนเดอร์ ทำให้ React.memo และ `shouldComponentUpdate` ทำงานได้อย่างมีประสิทธิภาพและป้องกันการเรนเดอร์ซ้ำที่ไม่จำเป็นของคอมโพเนนต์ลูก แนวปฏิบัตินี้มีความสำคัญอย่างยิ่งต่อการรักษาประสิทธิภาพในแอปพลิเคชันที่มีองค์ประกอบโต้ตอบจำนวนมาก

2. เชี่ยวชาญความแตกต่างของ useEffect และ useLayoutEffect

ความเข้าใจที่ชัดเจนเกี่ยวกับสองเฟสที่แตกต่างกันของ Fiber (Reconciliation และ Commit) ให้ความกระจ่างอย่างสมบูรณ์เกี่ยวกับความแตกต่างพื้นฐานระหว่าง hooks ที่สำคัญทั้งสองนี้:

• useEffect: hook นี้ทำงาน *หลังจาก* commit phase ทั้งหมดเสร็จสิ้น และที่สำคัญคือมันทำงานแบบ *asynchronous* หลังจากที่เบราว์เซอร์มีโอกาสวาด UI ที่อัปเดตแล้ว เป็นตัวเลือกที่เหมาะสำหรับการดำเนินการ side-effects ที่ไม่จำเป็นต้องบล็อกการอัปเดตภาพ เช่น การเริ่มต้นการดึงข้อมูล, การตั้งค่าการสมัครรับบริการภายนอก (เช่น web sockets), หรือการลงทะเบียน global event listeners แม้ว่า callback ของ useEffect จะใช้เวลาในการดำเนินการนาน แต่ก็จะไม่บล็อกส่วนต่อประสานผู้ใช้โดยตรง ซึ่งจะช่วยรักษาประสบการณ์ที่ลื่นไหล
• useLayoutEffect: ในทางตรงกันข้าม hook นี้ทำงานแบบ *synchronous* ทันทีหลังจากที่การเปลี่ยนแปลง DOM ทั้งหมดถูกนำไปใช้ใน commit phase แต่ที่สำคัญคือ *ก่อน* ที่เบราว์เซอร์จะดำเนินการวาดภาพครั้งต่อไป มันมีพฤติกรรมคล้ายกับ lifecycle methods componentDidMount และ componentDidUpdate แต่จะทำงานเร็วกว่าใน commit phase คุณควรใช้ useLayoutEffect เฉพาะเมื่อคุณต้องการอ่านเลย์เอาต์ DOM ที่แม่นยำ (เช่น การวัดขนาดของอิลิเมนต์, การคำนวณตำแหน่งการเลื่อน) แล้วทำการเปลี่ยนแปลง DOM แบบ synchronous ทันทีโดยอิงจากข้อมูลนั้น สิ่งนี้จำเป็นเพื่อป้องกันความไม่สอดคล้องกันทางภาพหรือ "การกระพริบ" ที่อาจเกิดขึ้นหากการเปลี่ยนแปลงเป็นแบบ asynchronous อย่างไรก็ตาม ควรใช้อย่างประหยัด เนื่องจากลักษณะที่เป็น synchronous ของมันหมายความว่ามัน *จะ* บล็อกรอบการวาดภาพของเบราว์เซอร์ ตัวอย่างเช่น หากคุณต้องการปรับตำแหน่งของอิลิเมนต์ทันทีหลังจากที่มันเรนเดอร์โดยอิงจากขนาดที่คำนวณได้ useLayoutEffect ก็เหมาะสม

3. ใช้ประโยชน์จาก Suspense และ Concurrent Features อย่างมีกลยุทธ์

Fiber เปิดใช้งานคุณสมบัติที่ทรงพลังและเป็นแบบประกาศ (declarative) โดยตรง เช่น Suspense สำหรับการดึงข้อมูล ซึ่งช่วยลดความซับซ้อนของสถานะการโหลดที่ซับซ้อน แทนที่จะจัดการตัวบ่งชี้การโหลดด้วยตนเองด้วยตรรกะการเรนเดอร์ตามเงื่อนไขที่ยุ่งยาก ตอนนี้คุณสามารถห่อหุ้มคอมโพเนนต์ที่ดึงข้อมูลด้วย <Suspense fallback={<LoadingSpinner />}> ได้อย่างประกาศ React ซึ่งใช้ประโยชน์จากพลังของ Fiber จะแสดง UI สำรองที่ระบุโดยอัตโนมัติในขณะที่ข้อมูลที่จำเป็นกำลังถูกโหลด แล้วจึงเรนเดอร์คอมโพเนนต์อย่างราบรื่นเมื่อข้อมูลพร้อม แนวทางแบบประกาศนี้ช่วยทำให้ตรรกะของคอมโพเนนต์สะอาดขึ้นอย่างมีนัยสำคัญและมอบประสบการณ์การโหลดที่สอดคล้องกันสำหรับผู้ใช้ทั่วโลก

            import React, { Suspense, lazy } from 'react';

const UserProfile = lazy(() => import('./UserProfile')); // Imagine this fetches data

function App() {
  return (
    <div>
      <h1>Welcome to Our Application</h1>
      <Suspense fallback={<p>Loading user profile...</p>}>
        <UserProfile />
      </Suspense>
    </div>
  );
}

            

              
                Copy
              
            
          

นอกจากนี้ สำหรับการอัปเดต UI ที่ไม่เร่งด่วนซึ่งไม่ต้องการการตอบสนองทางภาพทันที ให้ใช้ useTransition hook หรือ startTransition API อย่างจริงจังเพื่อทำเครื่องหมายอย่างชัดเจนว่าเป็นลำดับความสำคัญต่ำ คุณสมบัติอันทรงพลังนี้จะสั่งให้ React ทราบว่าการอัปเดตเฉพาะเหล่านี้สามารถถูกขัดจังหวะได้อย่างนุ่มนวลโดยการโต้ตอบของผู้ใช้ที่มีลำดับความสำคัญสูงกว่า เพื่อให้แน่ใจว่า UI ยังคงตอบสนองได้ดีแม้ในระหว่างการดำเนินการที่อาจช้า เช่น การกรองที่ซับซ้อน, การเรียงลำดับชุดข้อมูลขนาดใหญ่, หรือการคำนวณเบื้องหลังที่ซับซ้อน สิ่งนี้สร้างความแตกต่างที่จับต้องได้สำหรับผู้ใช้ โดยเฉพาะผู้ที่มีอุปกรณ์รุ่นเก่าหรือการเชื่อมต่ออินเทอร์เน็ตที่ช้ากว่า

4. ปรับการคำนวณที่มีค่าใช้จ่ายสูงออกจากเธรดหลัก

หากคอมโพเนนต์ของคุณมีการดำเนินการที่ใช้การคำนวณสูง (เช่น การแปลงข้อมูลที่ซับซ้อน, การคำนวณทางคณิตศาสตร์อย่างหนัก, หรือการประมวลผลภาพที่ซับซ้อน) สิ่งสำคัญคือต้องพิจารณาย้ายการดำเนินการเหล่านี้ออกจากเส้นทางการเรนเดอร์หลักหรือ memoize ผลลัพธ์อย่างพิถีพิถัน สำหรับการคำนวณที่หนักจริงๆ การใช้ Web Workers เป็นกลยุทธ์ที่ยอดเยี่ยม Web Workers ช่วยให้คุณสามารถย้ายการคำนวณที่ต้องการเหล่านี้ไปยังเธรดเบื้องหลังที่แยกต่างหาก ป้องกันไม่ให้พวกมันบล็อกเธรดหลักของเบราว์เซอร์โดยสิ้นเชิง และทำให้ React Fiber สามารถทำงานเรนเดอร์ที่สำคัญต่อไปได้โดยไม่มีอุปสรรค สิ่งนี้มีความเกี่ยวข้องเป็นพิเศษสำหรับแอปพลิเคชันระดับโลกที่อาจกำลังประมวลผลชุดข้อมูลขนาดใหญ่หรือดำเนินการอัลกอริทึมที่ซับซ้อนฝั่งไคลเอ็นต์ ซึ่งจำเป็นต้องทำงานอย่างสม่ำเสมอบนความสามารถของฮาร์ดแวร์ที่หลากหลาย

วิวัฒนาการที่ไม่หยุดนิ่งของ React และ Fiber

React Fiber ไม่ใช่แค่พิมพ์เขียวสถาปัตยกรรมที่หยุดนิ่ง แต่เป็นแนวคิดที่มีชีวิตชีวาและเปลี่ยนแปลงตลอดเวลาซึ่งยังคงพัฒนาและเติบโตต่อไป ทีมหลักของ React ที่ทุ่มเทกำลังสร้างต่อยอดจากรากฐานที่แข็งแกร่งอย่างต่อเนื่องเพื่อปลดล็อกความสามารถที่ก้าวล้ำยิ่งขึ้นและผลักดันขอบเขตของสิ่งที่เป็นไปได้ในการพัฒนาเว็บ คุณสมบัติในอนาคตและความก้าวหน้าอย่างต่อเนื่อง เช่น React Server Components, เทคนิค progressive hydration ที่ซับซ้อนขึ้นเรื่อยๆ, และแม้กระทั่งการควบคุมกลไกการจัดตารางเวลาภายในในระดับนักพัฒนาที่ละเอียดมากขึ้น ล้วนเป็นลูกหลานโดยตรงหรือการปรับปรุงในอนาคตที่เป็นเหตุเป็นผลซึ่งเปิดใช้งานโดยตรงโดยพลังและความยืดหยุ่นของสถาปัตยกรรม Fiber ที่อยู่เบื้องหลัง

เป้าหมายโดยรวมที่ขับเคลื่อนนวัตกรรมอย่างต่อเนื่องเหล่านี้ยังคงแน่วแน่: เพื่อให้มีเฟรมเวิร์กที่ทรงพลัง มีประสิทธิภาพเป็นพิเศษ และยืดหยุ่นสูง ซึ่งช่วยให้นักพัฒนาทั่วโลกสามารถสร้างประสบการณ์ผู้ใช้ที่ยอดเยี่ยมอย่างแท้จริงสำหรับผู้ชมทั่วโลกที่หลากหลาย โดยไม่คำนึงถึงข้อมูลจำเพาะของอุปกรณ์ สภาพเครือข่ายปัจจุบัน หรือความซับซ้อนโดยธรรมชาติของแอปพลิเคชันเอง Fiber ยืนหยัดในฐานะฮีโร่ที่ไม่มีใครร้องถึง เป็นเทคโนโลยีที่สำคัญที่ช่วยให้ React ยังคงอยู่ในแถวหน้าของการพัฒนาเว็บสมัยใหม่อย่างสม่ำเสมอ และยังคงกำหนดมาตรฐานสำหรับการตอบสนองและประสิทธิภาพของส่วนต่อประสานผู้ใช้ต่อไป

บทสรุป

สถาปัตยกรรม React Fiber แสดงถึงการก้าวกระโดดครั้งยิ่งใหญ่และพลิกโฉมในวิธีที่เว็บแอปพลิเคชันสมัยใหม่มอบประสิทธิภาพและการตอบสนองที่เหนือชั้น ด้วยการเปลี่ยนกระบวนการกระทบยอดแบบ synchronous และเรียกซ้ำในอดีตให้เป็นแบบ asynchronous และวนซ้ำอย่างชาญฉลาด ควบคู่ไปกับการจัดตารางเวลาแบบร่วมมืออย่างชาญฉลาดและการจัดการลำดับความสำคัญที่ซับซ้อนผ่าน Lane Model, Fiber ได้ปฏิวัติภูมิทัศน์ของการพัฒนา front-end โดยพื้นฐาน

มันเป็นพลังที่มองไม่เห็นแต่มีผลกระทบอย่างลึกซึ้ง ซึ่งขับเคลื่อนแอนิเมชันที่ลื่นไหล การตอบสนองของผู้ใช้ในทันที และคุณสมบัติที่ซับซ้อนอย่าง Suspense และ Concurrent Mode ที่เราตอนนี้มองข้ามไปอย่างราบรื่นในแอปพลิเคชัน React คุณภาพสูง สำหรับนักพัฒนาและทีมวิศวกรที่ทำงานอยู่ทั่วโลก การทำความเข้าใจแนวคิดของ Fiber อย่างถ่องแท้ไม่เพียงแต่ช่วยไขความกระจ่างเกี่ยวกับกลไกภายในอันทรงพลังของ React เท่านั้น แต่ยังให้ข้อมูลเชิงลึกที่นำไปปฏิบัติได้และล้ำค่าเกี่ยวกับวิธีการเพิ่มประสิทธิภาพแอปพลิเคชันให้มีความเร็วสูงสุด ความเสถียรที่ไม่สั่นคลอน และประสบการณ์ผู้ใช้ที่เหนือกว่าอย่างแท้จริงในโลกดิจิทัลที่เชื่อมต่อถึงกันและมีความต้องการสูงขึ้นเรื่อยๆ

การยอมรับหลักการและแนวปฏิบัติหลักที่เปิดใช้งานโดย Fiber เช่น การ memoization อย่างพิถีพิถัน, การใช้ useEffect และ useLayoutEffect อย่างมีสติและเหมาะสม, และการใช้ประโยชน์จากคุณสมบัติ concurrent อย่างมีกลยุทธ์ ช่วยให้คุณสามารถสร้างเว็บแอปพลิเคชันที่โดดเด่นอย่างแท้จริง แอปพลิเคชันเหล่านี้จะมอบปฏิสัมพันธ์ที่ราบรื่น น่าดึงดูด และตอบสนองได้ดีแก่ผู้ใช้ทุกคนอย่างสม่ำเสมอ ไม่ว่าพวกเขาจะอยู่ที่ใดบนโลกหรือใช้อุปกรณ์ใดก็ตาม